<script setup lang="ts">
import { ElButton, ElLink, ElTabs, ElTabPane } from "element-plus";
import type { TabsPaneContext } from 'element-plus'
import Header from "@/views/content/util/header.vue";
import { onMounted, ref, computed, reactive } from "vue";
import { orderListApi, orderCountNumberApi } from '@/apis/orderApi'
import { OrderCount } from '@/pojo/dto/order'
import Limit from '@/views/content/util/limit.vue'
import Empt from '@/views/content/util/empt.vue'
import { res } from '@/pojo/dto/res'

//订单统计
const orderCount = ref<OrderCount>({
  ing: 0,
  new: 0,
  exit: 0,
  error: 0,
  noOut: 0,
  distribution: 0,
  expedite: 0
})

const orderList = ref([])
const count = ref(10)
//显示加载状态？
const loadingItemList = ref(false)
const activeName_order_products = ref(["0"]);
const handleChange = (val: string[]) => {
  console.log(val);
}
const activeName_order_status = ref("ing")

//统计不同状态订单数量
const getOrderCountNumber = async () => {
  const res: res = await orderCountNumberApi()
  orderCount.value.ing = res.data.ing_order_number
  orderCount.value.new = res.data.new_order_number
  orderCount.value.exit = res.data.exit_order_number
  orderCount.value.error = res.data.erroe_order_number
  orderCount.value.noOut = res.data.noOut_order_number
  orderCount.value.distribution = res.data.distribution_order_number
  orderCount.value.expedite = res.data.expedite_order_number
}
//查询不同状态订单
const getOrderListByStatus = async (activeName_order_status: String, pagenum: number) => {
  loadingItemList.value = true
  const res = await orderListApi(activeName_order_status, pagenum)
  orderList.value = res.data.data
  count.value = parseInt(res.data.count)
  loadingItemList.value = false
}
//订单分类查询
const fenlei = async (tab: TabsPaneContext) => {
  console.log(tab.props.name)
  await getOrderListByStatus(tab.props.name, 1)
}

const getItemList = async (page:number) => {
  console.log('接收：')
  console.log(page)
  if (page != null) {
    loadingItemList.value = true
    //分页查询接口
    const res = await orderListApi(activeName_order_status.value, page)//传递页码
    orderList.value = res.data.data
    count.value = parseInt(res.data.count)
    loadingItemList.value = false
  }
}
onMounted(() => {
  getOrderListByStatus(activeName_order_status.value, 1)
  getOrderCountNumber()
})
</script>
<template>
  <Header title="外卖订单"></Header>
  <div style="height: 50px">
    <el-tabs v-model="activeName_order_status" class="demo-tabs" @tab-click="fenlei" type="card">
      <el-tab-pane :label="'进行中(' + orderCount.ing + ')'" name="ing"></el-tab-pane>
      <el-tab-pane :label="'新订单(' + orderCount.new + ')'" name="new"></el-tab-pane>
      <el-tab-pane :label="'退单(' + orderCount.exit + ')'" name="exit"></el-tab-pane>
      <el-tab-pane :label="'配送异常(' + orderCount.error + ')'" name="error"></el-tab-pane>
      <el-tab-pane :label="'待出餐(' + orderCount.noOut + ')'" name="noOut"></el-tab-pane>
      <el-tab-pane :label="'待配送(' + orderCount.distribution + ')'" name="distribution"></el-tab-pane>
      <el-tab-pane :label="'催单(' + orderCount.expedite + ')'" name="expedite"></el-tab-pane>
    </el-tabs>
  </div>

  <div>
    <div v-if="!loadingItemList" class="liti">
      <div v-show="orderList.length > 0">
        <div v-for="order in orderList" class="order-card">
          <div>
            <el-row style="background-color: rgb(248, 248, 248)">
              <el-col :span="3">
                <div class="order-id">
                  <h1 style="color: aliceblue">#{{ order.todayId }}</h1>
                </div>
              </el-col>
              <el-col :span="2">
                <div class="vertical">
                  <h3 v-if="order.deliveryStatus == 1">立即送达</h3>
                  <h3 v-else>{{ order.deliveryTime }}(指定)</h3>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="vertical">
                  <h3 v-if="order.deliveryStatus == 1" style="color: rgb(188, 185, 13)">{{ order.estimatedDeliveryTime
                  }}(预计)</h3>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="vertical">
                  <h3 style="color: rgb(20, 20, 19);margin-left: 50px;;width:300px ;">订单号:{{ order.oid }}</h3>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="vertical" style="position: absolute; right: 2%">
                  <h3 v-show="order.status == 2" style="color: rgb(131, 133, 133)">待接单</h3>
                  <h3 v-show="order.status == 3" style="color: rgb(131, 133, 133)">已接单</h3>
                  <h3 v-show="order.status == 4" style="color: rgb(131, 133, 133)">派送中</h3>
                  <h3 v-show="order.status == 5" style="color: rgb(131, 133, 133)">已完成</h3>
                  <h3 v-show="order.status == 6" style="color: rgb(131, 133, 133)">已取消</h3>
                  <h3 v-show="order.status == 7" style="color: rgb(131, 133, 133)">申请退款</h3>
                  <h3 v-show="order.status == 8" style="color: rgb(131, 133, 133)">配送异常</h3>
                  <h3 v-show="order.status == 9" style="color: rgb(131, 133, 133)">待出餐</h3>
                  <h3 v-show="order.status == 10" style="color: rgb(131, 133, 133)">待分配配送员</h3>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="3">
                <div style="margin-left: 15%">
                  <el-icon size="25">
                    <User />
                  </el-icon>
                  <label class="card-item-value"><strong>{{ order.consignee }}
                      <label v-if="order.sex == '1'">(先生)</label>
                      <label v-else>(女士)</label></strong>
                  </label>
                </div>
              </el-col>
              <el-col :span="3">
                <label style="font-size: 20px;color: silver;position: relative;left: 80%;">#下单666次</label>
              </el-col>
              <el-col>
                <div style="margin-left: 2%">
                  <el-icon size="25">
                    <Location />
                  </el-icon>
                  <label class="card-item-value">
                    <strong>{{ order.address }}</strong>
                  </label>
                </div>
              </el-col>
              <el-col>
                <div style="margin-left: 2%">
                  <el-icon size="25">
                    <PhoneFilled />
                  </el-icon>
                  <label class="card-item-value">
                    <strong> {{ order.phone }}</strong>
                  </label>
                </div>
              </el-col>
              <el-col>
                <div style="margin-left: 2%">
                  <el-icon size="25">
                    <ChatDotRound />
                  </el-icon>
                  <label class="card-item-value" style="background-color: rgb(239, 239, 233);"><strong>
                      <label style="color: red;">|</label></strong> {{ order.remark }}</label>
                </div>
              </el-col>
            </el-row>

            <el-row style="background-color: rgb(248, 248, 248);border-bottom: 1px solid rgb(233, 227, 227);">
              <el-col>
                <div class="demo-collapse">
                  <el-collapse v-model="activeName_order_products" @change="handleChange">
                    <el-collapse-item title="Consistency" :name="order.oid">
                      <template #title>
                        <div style="margin-left: 2%; margin-top: 1%">
                          <el-icon size="25">
                            <Goods />
                          </el-icon>
                        </div>
                        <label class="card-item-value">{{ order.products.length }}件商品</label>
                        <label style="position: absolute; right: 2%"><el-link :underline="false">展开</el-link></label>
                      </template>
                      <div>
                        <div v-for="product in order.products" class="product-item">
                          <div style="position: relative; top: 15px">
                            <div style="display: inline-block; width: 70%">
                              {{ product.name }}
                            </div>

                            <div style="display: inline-block; width: 15%">X{{ product.number }}</div>
                            <div style="display: inline-block; width: 15%">
                              {{ product.amount }}
                            </div>
                            <div style="display: block;position: relative;right: 0.5%;color: red;">
                              <label v-if="product.spec !== '[]' && product.spec !== null">【{{ product.specification
                              }}】</label>
                              <label v-if="product.prop !== '[]' && product.prop !== null">【{{ product.property
                              }}】</label>
                              <label v-if="product.char !== '[]' && product.char !== null">【{{ product.char }}】</label>
                            </div>
                          </div>
                          <el-divider />
                        </div>
                        <div>
                          <div class="product-item" style="color: silver">其他</div>
                          <div class="product-item">
                            <div style="display: inline-block; width: 85%">
                              包装费
                            </div>
                            <div style="display: inline-block; width: 15%">
                              {{ order.packAmount }}
                            </div>
                          </div>
                          <div class="product-item">
                            <div style="display: inline-block; width: 85%">
                              配送费
                            </div>
                            <div style="display: inline-block; width: 15%">
                              {{ order.deliveryAmount }}
                            </div>
                          </div>
                        </div>
                        <div class="product-item">
                          <br />
                          <div style="display: inline-block;width: 85%;font-size: 20px;">
                            总计
                          </div>
                          <div style="display: inline-block;width: 15%;font-size: 20px;">
                            {{ order.amount }}
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>
              </el-col>
            </el-row>

            <el-row>
              <div style="margin-left: 2%;height: 50px;">
                <el-icon size="25">
                  <Wallet />
                </el-icon>
                <div class="card-item-value" style="display: inline-block;width: 85%;">
                  <div style="display: inline-block;width: 92%;">
                    顾客实付
                  </div>
                  <div style="display: inline-block;"><strong>{{ order.amount }}</strong> </div>
                  <div>
                    <div style="display: inline-block;width: 92%;">
                      本单预计收入
                    </div>
                    <div style="display: inline-block;"><strong>{{ order.revenue }}</strong> </div>
                  </div>
                </div>
              </div>
            </el-row>
            <el-row>
              <div style="margin-left: 80%;height: 50px;">
                <el-button round>退款</el-button>
                <el-button type="success" round>确认收货</el-button>
              </div>
            </el-row>
          </div>
        </div>
      </div>
      <div v-show="orderList.length == 0">
        <Empt></Empt>
      </div>


    </div>
    <div v-if="loadingItemList" style="display: flex;justify-content: center;">
      <img src="@/assets/images/loading.gif" />
    </div>
    <div>
      <Limit :count="count" @updateItemList="getItemList"></Limit>
    </div>


  </div>
</template>

<style scoped lang="scss">
.order-id {
  position: relative;
  /* left: 5%; */
  width: 100%;
  background-color: rgb(110, 109, 109);
  border-end-end-radius: 4vw;
}

.order-card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  border: solid 1px rgb(249, 237, 237);
  border-radius: 15px;
  width: 80%;
  margin-top: 20px;
}

.card-item-value {
  font-size: 15px;
  position: absolute;
  left: 5%;
}

.vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.pentagon {
  width: 100px;
  height: 50px;
  border-style: solid;
  border-width: 25px 0 25px 20px;
  border-color: transparent transparent transparent red;
  transform: rotate(45deg);
}

.product-item {
  margin-left: 7%;
  width: 90%;
}

::v-deep .el-tabs__item {
  opacity: 0.5;
}

::v-deep .el-tabs__item.is-active {
  color: $seleceted;
  opacity: 1;
}

::v-deep .el-tabs__item:hover {
  color: $seleceted;
  cursor: pointer;
  opacity: 1;
}


</style>
